<template>
  <div class="mine-history-layout">
    <van-tabs v-model="active" :border="false" color="#0E5CE4">
      <van-tab name="course">
        <template #title>
          <span :class="['tab-title', active === 'course' && 'active-tab']">课程</span>
        </template>
      </van-tab>

      <van-tab name="info">
        <template #title>
          <span :class="['tab-title', active === 'info' && 'active-tab']">资讯</span>
        </template>
      </van-tab>
    </van-tabs>

    <div class="container">
      <component
        :is="`${active}-row-image`"
        v-for="item in histories"
        :key="item.id"
        :title="item.title"
        :desc="item.desc"
        :star="item.star"
        :read="item.read"
        :time="item.time"
        :author="item.author"
        @click.native="onSelect"
      />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
import CourseRowImage from '@/components/Product/RowImage'
import InfoRowImage from '@/components/Info/RowImage'

Vue.use(Tab).use(Tabs)

export default {
  components: {
    CourseRowImage,
    InfoRowImage
  },

  data() {
    return {
      active: 'course',
      histories: [
        {
          id: 0,
          title: '职业规划初始课程',
          desc: '就业 ｜ 应届',
          star: 4,
          read: 3.8,
          time: '04-15 11:06',
          author: '海豚交易'
        },
        {
          id: 1,
          title: '万事开头难，如何选择正确的行',
          desc: '就业 ｜ 应届',
          star: 4,
          read: 3.8,
          time: '04-15 11:06',
          author: '海豚交易'
        }
      ]
    }
  },

  methods: {
    onSelect() {
      const { $router, active } = this
      $router.push({
        name: active === 'course' ? 'product' : 'info',
        params: { id: '1' }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.mine-history-layout {
  .tab-title {
    background-color: #999999;
    background-clip: text;
    color: transparent;
    font-size: 15px;
    transition: 300ms;
  }

  .active-tab {
    background: linear-gradient(to bottom, #679ffc, #0d5ce4);
    background-clip: text;
    font-weight: 500;
    font-size: 17px;
  }

  .container {
    margin-top: 5px;
    background-color: #ffffff;
  }
}
</style>